<script setup>
import { ref } from 'vue';
//导入user数据源
import {userInfoStore}  from "../stores/UserInfoPinaStores.js";
//导入axios请求
import requset from "../axios/axios"
//获取用户信息
const user=userInfoStore();


//获取用户数据变量
let userName=user.getUserName;
let userId=user.getUserId;//获取用户id
console.log(user.getUserName)
//获取用户输入的寝室名字
let dormitoryName=ref("");
let dormitoryNameHint=ref("");
//寝室名字标志位
let dormitoryNameFlag=false;
let dormitoryIds=ref("");

//充值金额
let despoitMonkey=ref(0);
let despoitMonkeyHint=ref("");
//输入用户密码
let userPassword=ref("");
let userPasswordHint=ref("");
let userPasswordFlag=false
//判断寝室名字是否存在
async function checkDormitoryName(){
    if(dormitoryName.value!=null){

        let data=await requset.get("/checkDormitoryName",
        {
            params:{
                dormitorynname:dormitoryName.value
            }
        }
        )
        console.log(data)
        if(data.data.statusCode==205){
            //根据状态码设置提示
            dormitoryNameHint.value=data.data.message;
            //将获取到的寝室id存起来
            console.log(data)
            let dId=data.data.data.dormitoryId;
            console.log(dId)
            dormitoryIds.value=dId;


            dormitoryNameFlag=true;
        }else{
            dormitoryNameFlag=false;
            dormitoryNameHint.value= "寝室不存在";

        }
    
    }else{
        dormitoryNameHint.value="寝室名字不为空"
        dormitoryNameFlag=false;
    }
    
}
//对金额的判断
function checkDespoitMonkey(){
    if(despoitMonkey.value>0){
        //如果输入的金钱大于零返回true
        despoitMonkeyHint.value="OK"
        return true;
    }else{

        despoitMonkeyHint.value="金钱大于零"
        return false;
    }
    



}
//对用户密码的判断
async function  checkUserpwd(){
    //定义密码的的表达式
    var userPwdReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{5,15}$/;
    if(userPwdReg.test(userPassword.value)){
        //发送请求
        let {data} = await requset.get("/checkOldPwd",
            {
                params:{
                    username:user.getUserName,
                    userpassword:userPassword.value
                }
            }
        )
        if(data.statusCode==203){
            //如果状态码是203则
            userPasswordHint.value="OK"
            userPasswordFlag=true
        }else{
            userPasswordHint.value=data.message;
            userPasswordFlag=false
        }
    }
    
}
//充值
async function despoit(){
    if(dormitoryNameFlag && userPasswordFlag && checkDespoitMonkey()){
        //发送请求
       let {data} = await requset.get("/despoitMonkey",
            
            {
                params:{
                    userid:user.getUserId,
                    usermonkey:despoitMonkey.value,
                    dormitoryid:dormitoryIds.value

                    //这里可以扩展真实充值在服务器
                }
            }
        )
        if(data.statusCode==205){
            //充值成功状态码
            alert(data.message);
        }else{
            alert(data.message);
        }
    }
}

</script>

<template>
    
    <div class="showDespoit">
        <h1>用户冲值界面</h1>
        <div class="insertTable">
            
                <div class="lineStyle"><br>用户名:<span v-text="user.getUserName"></span></div>
                <div class="lineStyle"><br>输入寝室名字:<input type="text" v-model="dormitoryName"  @blur="checkDormitoryName()" class="inputStyle"/> <span class="showHint" v-text="dormitoryNameHint"></span></div>
                <div class="lineStyle"><br>充值金额:<input type="number" v-model="despoitMonkey" @blur="checkDespoitMonkey()" class="inputStyle" /><span class="showHint" v-text="despoitMonkeyHint"></span></div>
                <div class="lineStyle"><br>输入密码:<input type="password" v-model="userPassword" @blur="checkUserpwd()"  class="inputStyle" /><span class="showHint" v-text="userPasswordHint"></span></div>
                <div class="lineStyle"><br><button class="btnStyle" @click="despoit()">充值</button></div>

        </div>
        
    </div>
</template>

<style scoped>
    .showDespoit{
        width: 100%;
        height: 100%;
        background-color: rgb(222, 241, 241);
    }
    .insertTable{
        width: 60%;
        height: 60%;
        background-color: rgb(218, 207, 194);
        position: relative;
        top: 15%;
    }
    .showQuery{
        width: 100%;
        height: 60%;
        background-color: rgb(182, 122, 43);
    }
    .showQueryContent{
        width: 100%;
        height: 80%;
        background-color: aquamarine;
    }
    .showQueryFooter{
        width: 100%;
        height: 20%;
        background-color: rgb(184, 214, 204);
    }
    .lineStyle{
        width: 100%;
        height: 20%;
        background-color: rgb(215, 230, 206);
        margin: 0 auto;

        font-size: 20px;    

    }
    .lineStyle:hover{
        background-color: chartreuse;
    }
    /* 表格样式 */


/**
    按钮样式
*/
    .btnStyle{
        height: 43px;   
        width: 80px;
        border-radius: 10px;
        border: 0px;
        background-color: rgb(138, 236, 73);
    }
    .btnStyle:hover{
        background-color: aqua;
    }
    .btnStyle:active{
        background-color: rgb(125, 139, 179);
    }
/**
    输入框样式
*/
    .inputStyle{
        height: 50px;
        width: 230px;
        border: 0px;
        border-radius: 3px;
    }
/**
 * span样式
 */
    .showHint{
        color: darkorange;
        font-size: 20px;
    }
</style>
